<script setup>
import {ref, watch} from "vue";

const emits = defineEmits(['confirm']);
const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: '' // #1D93AB
  },
  disabled: {
    type: Boolean,
    default: false
  },
  circle: {
    type: Boolean,
    default: false
  },
  name: {
    type: String,
    default: ''
  },
});
// 按钮
const button = ref({
  disabled: props.disabled,
  style: {
    borderRadius: '0',
  }
});
// 监听属性
watch(() => props.disabled, (val) => {
  button.value.disabled = val;
}, {deep: true});
const confirm = () => {
  emits('confirm');
};
</script>

<template>
  <el-button v-if="!type" @click="confirm" :disabled="button.disabled" :color="color" :style="button.style"
             size="small">
    <slot name="default">
      <template v-if="name">
        {{ name }}
      </template>
    </slot>
  </el-button>
  <el-button v-else @click="confirm" :disabled="button.disabled" :type="type" :style="button.style"
             size="small">
    <slot name="default">
      <template v-if="name">
        {{ name }}
      </template>
    </slot>
  </el-button>
</template>

<style scoped>

</style>